<!DOCTYPE html>
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../js/easyui/locale/easyui-lang-zh_CN.js"></script>
<link rel="stylesheet" href="../js/easyui/themes/default/easyui.css" />
<link rel="stylesheet" href="../js/easyui/themes/icon.css" />

<!--引入jquery的ztree-->
<script type="text/javascript" src="../js/ztree/jquery.ztree.all-3.5.js"></script>
<link rel="stylesheet" href="../js/ztree/zTreeStyle.css" />
<html>

	<head>
		<meta charset="UTF-8">
		<title>消息窗口messager</title>
	</head>

	<script>
		$(function() {
			$('#grid').datagrid({
				iconCls: 'icon-forward',
				fit: true,
				border: false,
				rownumbers: true,
				striped: false,
				pageList: [3, 50, 100],
				pagination: true,
				toolbar: [{
					text : '增加',
					iconCls : 'icon-add',
					handler: function() {
						alert('add')
					}
				}, '-',{
					text : '修改',
					iconCls : 'icon-edit',
					handler: function() {
						alert('edit')
					}
				}, '-', {
					iconCls: 'icon-help',
					handler: function() {
						alert('help')
					}
				}],
				url: 'product.json',
				columns: [
					[

						{
							field: 'code',
							title: '编号',
							width: 100
						},

						{
							field: 'name',
							title: '名称',
							width: 100
						},

						{
							field: 'price',
							title: '价格',
							width: 100,
							align: 'right'
						}

					]
				]

			});

		})
	</script>

	<body>
		<table id="grid"></table>
	</body>

</html>